<loading-spinner [loading]="loading"></loading-spinner>

<div class="content"
     [@loadingState]="loading ? 'true' : 'false'">

  <br/>

  <div class="row">
    <div class="col-md">
      <form name="filterInputForm" (submit)="submitFilter()">
        <div class="input-group">
          <input id="filter-input" type="text" class="form-control"
                 placeholder="Filter..." [(ngModel)]="queryString"
                 name="queryString"/>
          <div class="input-group-append">
            <button type="submit" class="btn btn-secondary">Search
            </button>
            <button type="button" class="btn btn-secondary"
                    (click)="clearFilter()">Clear
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <br/>

  <div class="row">
    <div class="col-md">

      <button type="button" class="btn btn-secondary mr-2" (click)="refresh()">
        Refresh
      </button>

      <div class="btn-group dropright">
        <button type="button"
                class="btn btn-secondary dropdown-toggle"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false">
          Event Type: {{eventTypeFilter.name}}
        </button>
        <div class="dropdown-menu">
          <button *ngFor="let type of eventTypes"
                  style="cursor: pointer;"
             class="dropdown-item"
             (click)="setEventTypeFilter(type)">{{type.name}}</button>
        </div>
      </div>

      <div *ngIf="hasEvents()" class="float-right">
        <button type="button" class="btn btn-secondary mr-2"
                (click)="gotoNewest()">
          Newest
        </button>
        <button type="button" class="btn btn-secondary mr-2"
                (click)="gotoNewer()">
          Newer
        </button>
        <button type="button" class="btn btn-secondary mr-2"
                (click)="gotoOlder()">
          Older
        </button>
        <button type="button" class="btn btn-secondary"
                (click)="gotoOldest()">
          Oldest
        </button>
      </div>

    </div>
  </div>

  <div *ngIf="error">
    <br/>
    <div class="alert alert-danger text-center">{{error}}</div>
  </div>

  <div *ngIf="!error && !loading && !hasEvents()"
       style="text-align: center;">
    <hr/>
    No events found.
    <hr/>
  </div>

  <br/>

  <evebox-event-table
      [rows]="model.events"></evebox-event-table>
</div>